"use client"

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { useLanguage } from "@/context/language-context"

export function FaqSection() {
  const { dictionary } = useLanguage()

  const faqs = [
    {
      question: dictionary.faqQuestion1,
      answer: dictionary.faqAnswer1,
    },
    {
      question: dictionary.faqQuestion2,
      answer: dictionary.faqAnswer2,
    },
    {
      question: dictionary.faqQuestion3,
      answer: dictionary.faqAnswer3,
    },
  ]

  return (
    <section className="py-12 md:py-20 bg-gray-50 dark:bg-gray-900">
      <div className="container mx-auto px-4 md:px-6 max-w-3xl">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-10 text-gray-900 dark:text-gray-50">
          {dictionary.faqTitle}
        </h2>
        <Accordion type="single" collapsible className="w-full">
          {faqs.map((faq, index) => (
            <AccordionItem key={index} value={`item-${index}`}>
              <AccordionTrigger className="text-lg text-gray-900 dark:text-gray-50 hover:no-underline">
                {faq.question}
              </AccordionTrigger>
              <AccordionContent className="text-gray-700 dark:text-gray-300">{faq.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  )
}
